<template>
  <view class="club-selector-popup">
    <!-- 显示选中的俱乐部 -->
    <view style="width: 690rpx; margin: 0rpx auto;margin-bottom: 20rpx; display: flex;flex-direction: column;justify-content: start;align-items: center;">
      <view class="selector-display" @click="showSelector"
            style="font-size: 26rpx; display: flex;justify-content: space-between;align-items: center; width: 694rpx; height: 80rpx;background: #F7F7F7;border-radius: 24rpx;display: flex;">
        <view style="display: flex;align-items: center; padding-left: 30rpx;">
          <text class="display-text" style="color: #999;">{{ displayCourtText }}</text>
        </view>
        <image 
            style="width: 36rpx;height: 36rpx;margin: 0 30rpx;transform: rotate(90deg);opacity: 0.5;"
            src="../static/home/right.png" mode="widthFix" />
      </view>
      
    </view>
    
    <!-- 底部弹出选择器 -->
    <view class="popup-mask" v-if="showPopup" @click="cancelSelection"></view>
    <view class="popup-content" :class="{ 'popup-show': showPopup }">
      <view class="popup-header">
        <text class="popup-title">筛选</text>
        <text class="popup-cancel" @click="cancelSelection">取消</text>
      </view>
      
      <view class="popup-body">
        <!-- 省市区筛选区域 -->
        <view class="location-filter-section">
          <view class="location-filter-row">
            <view class="location-filter-item">
              <view class="filter-label">省</view>
              <view class="filter-value" @click="showProvincePicker = true">{{ selectedProvince || '请选择' }}</view>
            </view>
            <view class="location-filter-item">
              <view class="filter-label">市</view>
              <view class="filter-value" @click="showCityPicker = true">{{ selectedCity || '请选择' }}</view>
            </view>
            <view class="location-filter-item">
              <view class="filter-label">区</view>
              <view class="filter-value" @click="showDistrictPicker = true">{{ selectedDistrict || '请选择' }}</view>
            </view>
          </view>

        </view>
        
        <!-- 球馆选择区域 -->
        <scroll-view scroll-y class="club-tags-container">
          <view class="club-tags">
            <view class="club-tag" 
                  v-for="(option, index) in filteredOptions" 
                  :key="index" 
                  :class="{ active: tempSelectedIndices.includes(options.indexOf(option)) }"
                  @click="toggleOption(options.indexOf(option))">
              {{ option }}
            </view>
          </view>
        </scroll-view>
        
        <!-- 球场类型选择区域 -->
        <view class="court-type-section">
          <view class="section-title">球场类型</view>
          <view class="court-type-tags">
            <view class="court-type-tag" 
                  v-for="(type, index) in courtTypeOptions" 
                  :key="index" 
                  :class="{ active: selectedCourtTypeIndex === index }"
                  @click="selectCourtType(index)">
              {{ type }}
            </view>
          </view>
        </view>
      </view>
      
      <view class="popup-footer">
        <view class="reset-button" @click="resetSelection">重置</view>
        <button class="confirm-button" @click="confirmSelection">确定</button>
      </view>
    </view>
    
    <!-- 省选择器 -->
    <view class="picker-mask" v-if="showProvincePicker" @click="showProvincePicker = false"></view>
    <view class="picker-content" :class="{ 'picker-show': showProvincePicker }">
      <view class="picker-header">
        <text class="picker-title">选择省份</text>
        <text class="picker-cancel" @click="showProvincePicker = false">取消</text>
      </view>
      <picker-view class="picker-view" :value="[provinceIndex]" @change="onProvinceChange">
        <picker-view-column>
          <view class="picker-item" v-for="(province, index) in provinces" :key="index">{{ province }}</view>
        </picker-view-column>
      </picker-view>
      <view class="picker-footer">
        <button class="picker-confirm" @click="confirmProvince">确定</button>
      </view>
    </view>
    
    <!-- 市选择器 -->
    <view class="picker-mask" v-if="showCityPicker" @click="showCityPicker = false"></view>
    <view class="picker-content" :class="{ 'picker-show': showCityPicker }">
      <view class="picker-header">
        <text class="picker-title">选择城市</text>
        <text class="picker-cancel" @click="showCityPicker = false">取消</text>
      </view>
      <picker-view class="picker-view" :value="[cityIndex]" @change="onCityChange">
        <picker-view-column>
          <view class="picker-item" v-for="(city, index) in cities" :key="index">{{ city }}</view>
        </picker-view-column>
      </picker-view>
      <view class="picker-footer">
        <button class="picker-confirm" @click="confirmCity">确定</button>
      </view>
    </view>
    
    <!-- 区选择器 -->
    <view class="picker-mask" v-if="showDistrictPicker" @click="showDistrictPicker = false"></view>
    <view class="picker-content" :class="{ 'picker-show': showDistrictPicker }">
      <view class="picker-header">
        <text class="picker-title">选择区域</text>
        <text class="picker-cancel" @click="showDistrictPicker = false">取消</text>
      </view>
      <picker-view class="picker-view" :value="[districtIndex]" @change="onDistrictChange">
        <picker-view-column>
          <view class="picker-item" v-for="(district, index) in districts" :key="index">{{ district }}</view>
        </picker-view-column>
      </picker-view>
      <view class="picker-footer">
        <button class="picker-confirm" @click="confirmDistrict">确定</button>
      </view>
    </view>
  </view>
</template>

<script>
import courtTypeConfig from './courtTypeConfig.json';
import venueConfig from '../common/venueConfig.json';
import { getCurrentCity } from '../common/cityUtils.js';

export default {
  name: 'ClubSelectorPopup',
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showPopup: false,
      selectedIndices: [0], // 始终默认选中所有球馆
      tempSelectedIndices: [0], // 始终默认选中所有球馆
      courtTypeOptions: ['不限', '硬地室外场', '硬地风雨场/室内场', '红土风雨场'],
      selectedCourtTypeIndex: 0,
      courtTypeConfig: courtTypeConfig,
      
      // 省市区筛选相关数据
      showProvincePicker: false,
      showCityPicker: false,
      showDistrictPicker: false,
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
      provinceIndex: 0,
      cityIndex: 0,
      districtIndex: 0,
      provinces: [],
      cities: [],
      districts: [],
      allLocations: [],
      displayCourtText: '',
      // 保存滚动位置，用于iOS设备
      scrollPosition: 0
    };
  },
  watch: {
    selectedIndices: {
      handler(newVal) {
        this.tempSelectedIndices = [...newVal];
        // 更新显示文本
        this.displayText();
      },
      deep: true,
      immediate: true
    },
    showPopup(newVal) {
      // 当弹窗显示或隐藏时，控制页面滚动
      if (newVal) {
        // 禁止页面滚动 - 使用uni-app API，兼容iOS
        // 保存当前滚动位置
        this.scrollPosition = uni.getSystemInfoSync().windowHeight;
        
        // 使用uni-app API禁止滚动
        uni.setPageStyle({
          style: {
            overflow: 'hidden'
          }
        });
        
        // 添加touchmove事件监听，防止iOS设备上的滚动穿透
        // 检查document对象是否存在，兼容uni-app环境
        if (typeof document !== 'undefined' && document.addEventListener) {
          document.addEventListener('touchmove', this.preventTouchMove, { passive: false });
        }
      } else {
        // 恢复页面滚动
        uni.setPageStyle({
          style: {
            overflow: 'auto'
          }
        });
        
        // 移除touchmove事件监听
        // 检查document对象是否存在，兼容uni-app环境
        if (typeof document !== 'undefined' && document.removeEventListener) {
          document.removeEventListener('touchmove', this.preventTouchMove);
        }
      }
    },
    showProvincePicker(newVal) {
      this.handlePickerStateChange(newVal);
    },
    showCityPicker(newVal) {
      this.handlePickerStateChange(newVal);
    },
    showDistrictPicker(newVal) {
      this.handlePickerStateChange(newVal);
    }
  },
  computed: {
    
    filteredOptions() {
      // 如果没有选择省市区，则返回所有选项
      if (!this.selectedProvince && !this.selectedCity && !this.selectedDistrict) {
        return this.options;
      }
      
      // 如果选择了"所有"区域，则不限制区域
      const useDistrictFilter = this.selectedDistrict && this.selectedDistrict !== '所有';
      
      // 根据省市区筛选条件过滤球馆
      const filteredVenues = this.allLocations.filter(location => {
        const matchProvince = !this.selectedProvince || location.province === this.selectedProvince;
        const matchCity = !this.selectedCity || location.city === this.selectedCity;
        const matchDistrict = !useDistrictFilter || location.district === this.selectedDistrict;
        return matchProvince && matchCity && matchDistrict;
      });
      
      // 获取符合条件的球馆名称
      const filteredVenueNames = [...new Set(filteredVenues.map(location => location.venueName))];
      
      // 总是包含"所有球馆"选项，但在选择具体地区时，它只代表该地区下的所有球馆
      const includeAllOption = filteredVenueNames.length > 0;
      
      // 返回包含符合条件球馆名称的选项数组
      return this.options.filter((option, index) => {
        // 总是包含"所有球馆"选项（索引为0）
        if (index === 0) return includeAllOption;
        return filteredVenueNames.includes(option);
      });
    }
  },
  methods: {
    displayText() {
      console.log('selectedIndices',this.selectedIndices);
      
      if (this.selectedIndices.length === 0 || (this.selectedIndices.length === 1 && this.selectedIndices[0] === 0)) {
        this.displayCourtText = '所有球馆';
      } else {
        // 过滤掉"所有球馆"选项（索引为0）
        const filteredIndices = this.selectedIndices.filter(index => index !== 0);
        const selectedNames = filteredIndices.map(index => this.options[index]);
        this.displayCourtText = selectedNames.join(', ') || '所有球馆';
      }
    },
    showSelector() {
      // 在打开弹窗时，根据当前显示文本设置临时选择
      // 如果当前显示的是"所有球馆"，则在弹窗中只选中"所有球馆"
      if (this.displayCourtText === '所有球馆') {
        this.tempSelectedIndices = [0];
      } else {
        // 否则复制当前的选择状态
        this.tempSelectedIndices = [...this.selectedIndices];
      }
      this.showPopup = true;
    },
    
    toggleOption(index) {
      // 如果选择了"所有球馆"（索引为0），则清空其他选择
      if (index === 0) {
        this.tempSelectedIndices = [0];
      } else {
        // 如果选择了其他选项
        const selectedIndex = this.tempSelectedIndices.indexOf(index);
        
        if (selectedIndex > -1) {
          // 如果已选中，则移除
          this.tempSelectedIndices.splice(selectedIndex, 1);
        } else {
          // 如果未选中，则添加
          this.tempSelectedIndices.push(index);
        }
        
        // 移除"所有球馆"选项
        const allClubIndex = this.tempSelectedIndices.indexOf(0);
        if (allClubIndex > -1) {
          this.tempSelectedIndices.splice(allClubIndex, 1);
        }
      }
    },
    
    selectCourtType(index) {
      this.selectedCourtTypeIndex = index;
    },
    
    confirmSelection() {
      // 确认选择，更新选中的索引
      this.selectedIndices = [...this.tempSelectedIndices];
      console.log('this.tempSelectedIndices',this.tempSelectedIndices,this.selectedIndices);
      
      // 更新显示文本
      this.displayText();
      
      this.$forceUpdate();
      // 触发input事件，传递选中的索引数组
      this.$emit('input', this.selectedIndices);
      
      // 触发change事件，传递详细信息
      this.$emit('change', {
        detail: {
          value: this.selectedIndices
        }
      });
      
      // 如果选择了"所有球馆"且有地区筛选，则传递地区筛选后的球馆名称
      if (this.selectedIndices.length === 1 && this.selectedIndices[0] === 0 && 
          (this.selectedProvince || this.selectedCity || this.selectedDistrict)) {
        // 获取地区筛选后的球馆名称
        const filteredVenues = this.allLocations.filter(location => {
          const matchProvince = !this.selectedProvince || location.province === this.selectedProvince;
          const matchCity = !this.selectedCity || location.city === this.selectedCity;
          const matchDistrict = !this.selectedDistrict || this.selectedDistrict === '所有' || location.district === this.selectedDistrict;
          return matchProvince && matchCity && matchDistrict;
        });
        
        const filteredVenueNames = [...new Set(filteredVenues.map(location => location.venueName))];
        
        // 触发地区筛选事件，传递地区筛选后的球馆名称
        this.$emit('district-filter', {
          detail: {
            province: this.selectedProvince,
            city: this.selectedCity,
            district: this.selectedDistrict,
            venueNames: filteredVenueNames
          }
        });
      }
      
      // 触发球场类型选择事件
      this.$emit('court-type-change', {
        detail: {
          value: this.selectedCourtTypeIndex,
          courtType: this.courtTypeOptions[this.selectedCourtTypeIndex],
          config: this.courtTypeConfig
        }
      });
      
      // 关闭popup
      this.showPopup = false;
    },
    
    cancelSelection() {
      // 取消选择，恢复之前的选择
      this.tempSelectedIndices = [...this.selectedIndices];
      
      // 关闭popup
      this.showPopup = false;
    },
    
    resetSelection() {
      // 重置选择，恢复到初始状态
      this.selectedIndices = [0]; // 重置选中的索引
      this.tempSelectedIndices = [0]; // 默认选中所有球馆
      this.selectedCourtTypeIndex = 0; // 重置球场类型选择
      
      // 重置省市区选择为默认值
      this.selectedProvince = '广东省';
      this.selectedCity = '东莞市';
      this.selectedDistrict = '所有';
      this.provinceIndex = this.provinces.indexOf('广东省') >= 0 ? this.provinces.indexOf('广东省') : 0;
      this.cityIndex = this.cities.indexOf('东莞市') >= 0 ? this.cities.indexOf('东莞市') : 0;
      this.districtIndex = 0;
      
      // 更新城市和区域选项
      this.updateCities();
      this.updateDistricts();
      
      // 更新显示文本
      this.displayText();
      
      // 触发事件通知父组件
      this.$emit('input', this.selectedIndices);
      this.$emit('change', {
        detail: {
          value: this.selectedIndices
        }
      });
    },
    
    handlePickerStateChange(isShow) {
      // 当选择器弹窗显示或隐藏时，控制页面滚动
      if (isShow) {
        // 禁止页面滚动 - 使用uni-app API，兼容iOS
        // 保存当前滚动位置
        this.scrollPosition = uni.getSystemInfoSync().windowHeight;
        
        // 使用uni-app API禁止滚动
        uni.setPageStyle({
          style: {
            overflow: 'hidden'
          }
        });
        
        // 添加touchmove事件监听，防止iOS设备上的滚动穿透
        // 检查document对象是否存在，兼容uni-app环境
        if (typeof document !== 'undefined' && document.addEventListener) {
          document.addEventListener('touchmove', this.preventTouchMove, { passive: false });
        }
      } else {
        // 恢复页面滚动
        uni.setPageStyle({
          style: {
            overflow: 'auto'
          }
        });
        
        // 移除touchmove事件监听
        // 检查document对象是否存在，兼容uni-app环境
        if (typeof document !== 'undefined' && document.removeEventListener) {
          document.removeEventListener('touchmove', this.preventTouchMove);
        }
      }
    },
    
    preventTouchMove(e) {
      // 阻止touchmove事件的默认行为，防止iOS设备上的滚动穿透
      e.preventDefault();
    },
    
    // 省市区选择相关方法
    onProvinceChange(e) {
      this.provinceIndex = e.detail.value[0];
    },
    
    onCityChange(e) {
      this.cityIndex = e.detail.value[0];
    },
    
    onDistrictChange(e) {
      this.districtIndex = e.detail.value[0];
    },
    
    confirmProvince() {
      this.selectedProvince = this.provinces[this.provinceIndex];
      this.showProvincePicker = false;
      // 重置市和区的选择
      this.selectedCity = '';
      this.selectedDistrict = '所有';
      this.cityIndex = 0;
      this.districtIndex = 0;
      // 更新市和区的选项
      this.updateCities();
      this.updateDistricts();
    },
    
    confirmCity() {
      this.selectedCity = this.cities[this.cityIndex];
      this.showCityPicker = false;
      // 重置区的选择
      this.selectedDistrict = '所有';
      this.districtIndex = 0;
      // 更新区的选项
      this.updateDistricts();
    },
    
    confirmDistrict() {
      this.selectedDistrict = this.districts[this.districtIndex];
      this.showDistrictPicker = false;
      
      // 选择完镇区后，默认选中所有球馆
      // 如果镇区是'所有'或者选择了具体镇区，都默认选中所有球馆
      this.tempSelectedIndices = [0]; // 选中所有球馆（索引为0）
      
      // 更新显示文本
      this.displayText();
    },
    
    updateCities() {
      if (this.selectedProvince) {
        // 获取所选省份的所有城市
        const citiesInProvince = this.allLocations
          .filter(location => location.province === this.selectedProvince)
          .map(location => location.city);
        this.cities = [...new Set(citiesInProvince)];
      } else {
        // 如果没有选择省份，显示所有城市
        const allCities = this.allLocations.map(location => location.city);
        this.cities = [...new Set(allCities)];
      }
      this.cityIndex = 0;
    },
    
    updateDistricts() {
      if (this.selectedProvince && this.selectedCity) {
        // 获取所选省份和城市的所有区域
        const districtsInCity = this.allLocations
          .filter(location => location.province === this.selectedProvince && location.city === this.selectedCity)
          .map(location => location.district);
        this.districts = ['所有', ...new Set(districtsInCity)];
      } else if (this.selectedProvince) {
        // 如果只选择了省份，显示该省份的所有区域
        const districtsInProvince = this.allLocations
          .filter(location => location.province === this.selectedProvince)
          .map(location => location.district);
        this.districts = ['所有', ...new Set(districtsInProvince)];
      } else {
        // 如果没有选择省份和城市，显示所有区域
        const allDistricts = this.allLocations.map(location => location.district);
        this.districts = ['所有', ...new Set(allDistricts)];
      }
      this.districtIndex = 0;
    },
    
    initLocations() {
      // 从venueConfig中提取所有省市区信息
      const locations = [];
      venueConfig.venues.forEach(venue => {
        venue.addresses.forEach(address => {
          locations.push({
            venueName: venue.name,
            province: address.province,
            city: address.city,
            district: address.district
          });
        });
      });
      this.allLocations = locations;
      
      // 提取所有唯一的省份
      const allProvinces = locations.map(location => location.province);
      this.provinces = [...new Set(allProvinces)];
      
      // 设置默认省份为广东省
      this.selectedProvince = '广东省';
      const provinceIndex = this.provinces.indexOf('广东省');
      this.provinceIndex = provinceIndex >= 0 ? provinceIndex : 0;
      
      // 初始化城市选项
      const allCities = locations.map(location => location.city);
      this.cities = [...new Set(allCities)];
      
      // 检测当前城市并设置默认城市
      let defaultCity = '东莞市'; // 默认为东莞市
      try {
        const currentCity = getCurrentCity();
        if (currentCity && currentCity.name === '广州市') {
          defaultCity = '广州市';
          console.log('检测到当前城市为广州市，设置默认城市为广州市');
        }
      } catch (error) {
        console.error('获取当前城市失败，使用默认城市东莞市:', error);
      }
      
      // 设置默认城市
      this.selectedCity = defaultCity;
      const cityIndex = this.cities.indexOf(defaultCity);
      this.cityIndex = cityIndex >= 0 ? cityIndex : 0;
      
      // 初始化区域选项，添加"所有"选项
      const allDistricts = locations.map(location => location.district);
      this.districts = ['所有', ...new Set(allDistricts)];
      this.selectedDistrict = '所有';
      this.districtIndex = 0;
      
      // 更新城市和区域选项
      this.updateCities();
      this.updateDistricts();
    }
  },
  mounted() {
    this.initLocations();
  }
};
</script>

<style scoped>
.club-selector-popup {
  position: relative;
  /* width: 97px; */
}

.display-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
      display: inline-block;
    max-width: 567rpx;
}


.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  /* 阻止触摸事件穿透到底层页面 */
  pointer-events: auto;
  /* 防止页面滚动 */
  overflow: hidden;
}

.popup-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  overflow: hidden;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 80vh;
}

.popup-content.popup-show {
  transform: translateY(0);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-cancel {
  font-size: 28rpx;
  color: #999;
  padding: 30rpx; 
  margin: -30rpx;
}

.popup-body {
  max-height: 1000rpx;
}

/* 省市区筛选区域样式 */
.location-filter-section {
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.location-filter-row {
  display: flex;
  justify-content: space-between;
}

.location-filter-item {
  flex: 1;
  text-align: center;
  padding: 10rpx;
}

.filter-label {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 5rpx;
  display: flex;
}

.filter-value {
  font-size: 28rpx;
  color: #333;
  padding: 10rpx;
  border: 1rpx solid #e6e6e6;
  border-radius: 24rpx;
  background-color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 球馆选择区域样式 */
.club-tags-container {
  max-height: 500rpx; /* 调整高度以适应省市区筛选 */
}

.club-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15rpx;
  padding: 20rpx;
}

.court-type-section {
  padding: 20rpx;
  border-top: 1rpx solid #eee;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
}

.court-type-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15rpx;
}

.court-type-tag {
  padding: 20rpx;
  background-color: rgb(255, 255, 255);
  backdrop-filter: blur(10px);
  border-radius: 24rpx;
  font-size: 28rpx;
  text-align: center;
  color: #333;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2rpx 8rpx 0 rgba(31, 38, 135, 0.1);
  transition: all 0.3s ease;
}

.court-type-tag.active {
  background-color: #42CF7F;
  backdrop-filter: blur(10px);
  color: white;
  border-color: #42CF7F;
  box-shadow: 0 4rpx 16rpx 0 rgba(66, 207, 127, 0.3);
}

.club-tag {
  padding: 20rpx 5rpx;
  background-color: rgb(255, 255, 255);
  backdrop-filter: blur(10px);
  border-radius: 24rpx;
  font-size: 28rpx;
  text-align: center;
  color: #333;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2rpx 8rpx 0 rgba(31, 38, 135, 0.1);
  transition: all 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.club-tag.active {
  background-color: #42CF7F;
  backdrop-filter: blur(10px);
  color: white;
  border-color: #42CF7F;
  box-shadow: 0 4rpx 16rpx 0 rgba(66, 207, 127, 0.3);
}

.popup-footer {
  display: flex;
  padding: 30rpx;
  gap: 20rpx;
  margin-bottom: env(safe-area-inset-bottom);
}

.confirm-button {
  flex: 1;
  height: 100rpx;
  background-color: #42CF7F;
  color: white;
  border-radius: 24rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reset-button {
  flex: 0.5;
  height: 100rpx;
  background-color: #f7f7f7;
  color: #666;
  border-radius: 24rpx;
  font-size: 32rpx;
  font-weight: bold;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 选择器样式 */
.picker-mask {
  position: fixed;
  top: -50vh;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  /* 阻止触摸事件穿透到底层页面 */
  pointer-events: auto;
  /* 防止页面滚动 */
  overflow: hidden;
  width: 750rpx;
  height: 100vh;
}

.picker-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  z-index: 1002;
  transform: translateY(100%);
  transition: all 0.3s ease-out;
}

.picker-content.picker-show {
  transform: translateY(0);
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.picker-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.picker-cancel {
  font-size: 28rpx;
  color: #999;
}

.picker-view {
  height: 400rpx;
  width: 100%;
}

.picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  font-size: 28rpx;
  color: #333;
}

.picker-footer {
  padding: 30rpx 40rpx;
  border-top: 1rpx solid #eee;
}

.picker-confirm {
  flex: 1;
  height: 110rpx;
  line-height: 110rpx;
  background-color: #42CF7F;
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 24rpx;
  font-size: 32rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4rpx 16rpx 0 rgba(66, 207, 127, 0.3);
  transition: all 0.3s ease;
  margin-left: 20rpx;
  margin-bottom: 80rpx;
}
</style>